import { getPixi } from '@renderer/store/modules/usePixiStore'
import useMainStore from '@renderer/store/modules/useMainStore'
import newCard from './newCard'
import { useWindowSize } from '@vueuse/core'
import useCardsStore from '@renderer/store/modules/useCardsStore'
import useDiyStore from '@renderer/store/modules/useDiyStore'
import gsap from 'gsap'
import * as PIXI from 'pixi.js'
import { pixiToBase64 } from '@renderer/utils/export'
import { nameDiyCard } from '@renderer/config'
import { excludeUnderscoreProps } from '@renderer/utils'

const cardsStore = useCardsStore()
const diyStore = useDiyStore()

/** 渲染卡册 */
const render = async (): Promise<void> => {
  const { bottomWidth, bottomHeight } = getParams()
  const cardSetsContainer = getPixi('cardSets')
  cardSetsContainer.removeChildren() // 清空卡牌
  cardsStore.getFrom.forEach(async (data, index) => {
    const card = await newCard(data)
    const x = index % 4
    const y = Math.floor(index / 4)
    gsap.set(card, {
      pixi: {
        scale: 0.7,
        positionX: bottomWidth * (x / 4 + 0.125),
        positionY: bottomHeight * (y / 2 + 0.25),
      },
    })
    cardSetsContainer.addChild(card)
  })
}
/** 获取卡牌布局时所需参数 */
const getParams = (): { bottomWidth: number; bottomHeight: number } => {
  const mainStore = useMainStore()
  const { scale } = mainStore.getAppAttr
  const { width, height } = useWindowSize()
  const bottomWidth = (width.value / scale - 96) * 0.88 - 453 * 0.83 + 48
  const bottomHeight = height.value / scale - 114 - 30
  return { bottomWidth, bottomHeight }
}

/** 添加卡牌后将卡牌渲染到卡册中 */
export const addCards = async (): Promise<void> => {
  const { bottomWidth, bottomHeight } = getParams()
  cardsStore.getFrom.forEach(async (data, index) => {
    if (!data._container) {
      const card = await newCard(data)
      const x = index % 4
      const y = Math.floor(index / 4)
      gsap.set(card, {
        pixi: {
          scale: 0.7,
          positionX: bottomWidth * (x / 4 + 0.125),
          positionY: bottomHeight * (y / 2 + 0.25),
        },
      })
    }
  })
}

/** 更新卡册的卡牌位置 */
export const updatedCardSets = async (): Promise<void> => {
  const { bottomWidth, bottomHeight } = getParams()
  cardsStore.getFrom.forEach(async (data, index) => {
    const card = data._container
    const x = index % 4
    const y = Math.floor(index / 4)
    gsap.set(card, {
      pixi: {
        scale: 0.7,
        positionX: bottomWidth * (x / 4 + 0.125),
        positionY: bottomHeight * (y / 2 + 0.25),
      },
    })
  })
}

/** 添加DIY卡牌 */
export const addDiyCard = async (): Promise<void> => {
  const saveData = diyStore.dataCompleted() // 将数据整理成保存格式
  if (!saveData.picture) {
    const assets = await PIXI.Assets.load<PIXI.Texture>('card_' + diyStore.editCardId) // 图片处理
    saveData.picture = await pixiToBase64(assets)
  }
  const result = await window.api.savePortfolio(saveData)
  // 渲染到卡册
  if (result.success) {
    PIXI.Assets.add({
      alias: 'card_' + saveData.id,
      src: await nameDiyCard(saveData),
    })
    saveData.picture = '' // 这里似乎可以不用清除掉 TODO
  }
  cardsStore.diys.push(saveData)
  cardsStore.diyDataMap.set(saveData.id, saveData)
  render()
}
/** 删除DIY卡牌 */
export const delDiyCard = async (card: Wx.Card.Data): Promise<void> => {
  const index = cardsStore.diys.indexOf(card)
  if (index !== -1) {
    await window.api.renamePortfolio(excludeUnderscoreProps(card)) // 修改本地数据
    // 删除数据
    cardsStore.diys.splice(index, 1)
    cardsStore.diyDataMap.delete(card.id)
    card._container.visible = false
    card._convertContainer.visible = false
    await updatedCardSets()
  }
}

export default render
